<template>
	<a-modal :visible="visible" width="550px" title="调配" centered destroyOnClose @cancel="cancel" :footer="null" :maskClosable="false" wrapClassName="a-modal-dialog">
		<a-form ref="formRef" :model="modelRef" :rules="formRules" class="flex-container-nomal" style="max-height: 70vh" @finish="run" :labelCol="{style: {width: '90px'}}">
			<div class="flex1 auto-y">
				<a-row>
					<a-col :span="12">
						<a-form-item label="物品名称">
							{{ detailInfo.configName }}
						</a-form-item>
					</a-col>
					<a-col :span="12">
						<a-form-item label="数量">
							{{ detailInfo.count }}
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="所在位置">
							{{ detailInfo.currentPosition }}
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="调配至" name="warehouseId">
							<a-input-group compact style="display: flex">
								<a-form-item-rest>
									<a-select style="width: 100px" v-model:value="locationType" :options="locationTypeList" @change="locationTypeChange" />
								</a-form-item-rest>
								<template v-if="locationType == 0">
									<a-select :options="houseData" style="flex: 1; overflow: hidden" v-model:value="modelRef.houseOptions" label-in-value show-search placeholder="请输入房源编号/房源地址/项目编号/门牌号" :default-active-first-option="false" :show-arrow="false" :filter-option="false" :not-found-content="null" :field-names="{label: 'address', value: 'houseRoomId'}" @search="handleSearch" @change="handleChange" />
								</template>
								<template v-else-if="locationType == 1">
									<a-select :options="wareHouseList" style="flex: 1; overflow: hidden" v-model:value="modelRef.warehouseId" placeholder="请选择库房" :field-names="{label: 'name', value: 'id'}" />
								</template>
							</a-input-group>
						</a-form-item>
					</a-col>
				</a-row>
			</div>
			<div class="a-modal-dialog-footer">
				<a-space :size="12">
					<a-space :size="12">
						<a-button @click="cancel">取消</a-button>
						<a-button type="primary" html-type="submit" :loading="loading" :disabled="loading">确定</a-button>
					</a-space>
				</a-space>
			</div>
		</a-form>
	</a-modal>
</template>
<script setup lang="ts">
	import {reactive, ref, watch} from 'vue'
	import {useRequest} from 'vue-request'
	import {getWareHouseList, houseConfigDetail, houseConfigTransfer} from '@/api/dictionary'
	import {message} from 'ant-design-vue'
	import houseApi from '@/api/house-api'

	const props = defineProps({
		visible: {
			type: Boolean,
			required: true
		},
		id: {
			type: [String, Number],
			default: ''
		},
		roomId: {
			type: String,
			default: ''
		}
	})
	const emit = defineEmits(['update:visible', 'success', 'getWarehouseId'])
	const cancel = () => {
		emit('update:visible', false)
		resetForm()
	}
	watch(
		() => props.visible,
		(newVal: boolean) => {
			if (newVal) {
				getDetail()
			}
		}
	)

	const modelRef = reactive({
		warehouseId: null,
		houseOptions: null,
		houseId: null
	})

	const formRules = {
		warehouseId: [
			{
				required: true,
				validator: async (_rule: Rule, value: string) => {
					if (locationType.value) {
						if (value) {
							return Promise.resolve()
						} else {
							return Promise.reject('请选择库房')
						}
					} else {
						if (modelRef.houseId) {
							if (modelRef.houseId == props.roomId) {
								return Promise.reject('调配房间不能为当前房间')
							}
							return Promise.resolve()
						} else {
							return Promise.reject('请选择房间')
						}
					}
				}
			}
		]
	}

	const wareHouseList = ref<any>([])

	const detailInfo = ref<any>({})
	const getDetail = () => {
		// 获取库房列表
		getWareHouseList({}).then((res: any) => {
			wareHouseList.value = res.data
			console.log(res, '库房列表')
		})
		houseConfigDetail(props.id).then((res: any) => {
			detailInfo.value = res.data
		})
	}

	const locationTypeList = [
		{
			value: 0,
			label: '房间'
		},
		{
			value: 1,
			label: '库房'
		}
	]
	const locationType = ref(0)

	const locationTypeChange = () => {
		// 房间
		modelRef.houseOptions = null
		modelRef.houseId = null
		houseData.value = []
		// 库房
		modelRef.warehouseId = null
		formRef.value.resetFields('warehouseId')
	}

	const houseData = ref<any[]>([])

	let timeout: any
	const handleSearch = (val: any) => {
		if (timeout) {
			clearTimeout(timeout)
			timeout = null
		}
		let params = {
			houseType: 0,
			like: val,
			current: 1,
			bizType: 1,
			size: 9999
		}
		const fake = () => {
			houseApi.searchByAddress(params).then((res: any) => {
				houseData.value = res.data.records
			})
		}
		timeout = setTimeout(fake, 300)
	}
	const handleChange = (val: any) => {
		modelRef.houseId = val.value
	}

	const sendRequest = () => {
		let params: any = {id: props.id}
		if (locationType.value) {
			params.warehouseId = modelRef.warehouseId
		} else {
			params.houseId = modelRef.houseId
		}
		return houseConfigTransfer(params)
	}

	const {run, loading} = useRequest(sendRequest, {
		manual: true,
		formatResult: (res: any) => {
			if (res.code == 200) {
				message.success('操作成功')
				setTimeout(() => {
					emit('getWarehouseId', modelRef.warehouseId)
					emit('success')
					cancel()
				}, 300)
			}
		}
	})

	// 重置表单
	const formRef = ref<any>()
	const resetForm = () => {
		formRef.value.resetFields()
		detailInfo.value = {}
		locationTypeChange()
		locationType.value = 0
	}
</script>
